<template>
    <div class="free">
        <!-- 精品限时免费 -->
        <div class="freess" v-if="FreeData !== null">
            <div class="title">{{ FreeData[0].name }}</div>
            <div class="item-box">
                <div class="item" v-for="(item, index) in BoutiqueData" :key="index" @click="goBookDetails(item.id, item.title)">
                    <div class="img-box">
                        <img class="img-auto" :src="item.cover" />
                    </div>
                    <div class="name">{{ item.title }}</div>
                    <div class="price">{{ item.nwprice }}阅点/千字</div>
                    <div class="frees">免费</div>
                </div>
            </div>
        </div>
        <!-- 好书专区 -->
        <div class="GoodBook" v-if="FreeData !== null">
            <div class="title">{{ FreeData[1].name }}</div>
            <div class="GoodBook-item" v-for="(item, index) in GoodBookData" @click="goBookDetails(item.id, item.title)">
                <div class="img-box">
                    <img class="img-auto" :src="item.cover" />
                </div>
                <div class="RigMsg">
                    <div class="name">{{ item.title }}</div>
                    <div class="desc">{{ item.content }}</div>
                    <div class="author-type-atonce">
                        <div class="author-type">{{ item.author }} / {{ item.category }}</div>
                        <div class="atonce">立即阅读</div>
                        <van-icon class="greater" name="arrow" />
                    </div>
                </div>
            </div>
        </div>
        <!-- 猜你喜欢 -->
        <div class="Lick" v-if="FreeData !== null">
            <div class="title">{{ FreeData[2].name }}</div>
            <div class="Lick-item" v-for="(item, index) in LickData" @click="goBookDetails(item.id, item.title)">
                <div class="img-box">
                    <img class="img-auto" :src="item.cover" />
                </div>
                <div class="RigMsg">
                    <div class="name">{{ item.title }}</div>
                    <div class="author-type">{{ item.author }} / {{ item.category }}</div>
                    <div class="desc">{{ item.content }}</div>
                </div>
            </div>
        </div>
        <div class="foot">我是有底线的(*^▽^*)</div>
    </div>
</template>

<script>
// 引入页面数据
// import {getFree} from '../api/FreeData.js'
// 引入方法
// import goBookDetail from "../components/goBookDetailView.vue";
export default {
    name: "Free",
    data() {
        return {
            // 页面所有数据
            FreeData: null,
            // 精品限时免费
            BoutiqueData: null,
            // 好书专区
            GoodBookData: null,
            // 猜你喜欢
            LickData: null,
        };
    },
    // components: {
    //     goBookDetail,
    // },
    created() {
        this.getFree();
        // getFree().then(data=>{
        //     this.FreeData = data.data.list
        //     (this.FreeData);
        //     // 精品限时免费
        //     this.BoutiqueData = this.FreeData[0].list
        //     // (this.BoutiqueData);
        //     // 好书专区
        //     this.GoodBookData = this.FreeData[1].list
        //     // 猜你喜欢
        //     this.LickData = this.FreeData[2].list
        // })
    },
    methods: {
        // 请求数据
        getFree() {
            this.axios({
                method: "get",
                url: "store/show.json",
                params: {
                    type: "free",
                    uuid: "ea81f0be96a74d4fa7c674b9252a9ef4",
                },
            })
                .then((res) => {
                    this.FreeData = res.data.data.list;
                    // 精品限时免费
                    this.BoutiqueData = this.FreeData[0].list;
                    // 好书专区
                    this.GoodBookData = this.FreeData[1].list;
                    // 猜你喜欢
                    this.LickData = this.FreeData[2].list;
                })
                .catch((err) => {
                    err;
                });
        },
        // 跳转书籍详情
        goBookDetails(BookId, title) {
            this.$router.push({
                name: "BookDetails",
                query: {
                    BookId,
                    title,
                },
            });
        },
    },
};
</script>

<style lang="less" scoped>
.free {
    height: 522px;
    overflow-y: auto;
    background-color: #f7f8f8;
    // 去掉滚动条
    &::-webkit-scrollbar {
        display: none;
    }

    .foot {
        width: 100%;
        height: 40px;
        background-color: #ecefef;
        text-align: center;
        line-height: 40px;
    }
    .freess {
        width: 350px;
        margin: 0 auto;
        border-bottom: 1px solid #e5eaea;
        padding-bottom: 50px;
        .item-box {
            width: 350px;
            margin: 0 auto;
            display: flex;
            .item {
                width: calc(33.333%);
                margin-right: 18px;
                .frees {
                    color: orange;
                }
                .img-box {
                    width: 100%;
                    margin-bottom: 10px;
                }
                .name {
                    width: 100%;
                    // height: 13%;
                    // 给容器元素类型转换为
                    display: -webkit-box;
                    // 设置弹性盒子垂直排列
                    -webkit-box-orient: vertical;
                    // 控制要显示的行数
                    -webkit-line-clamp: 1;
                    // 溢出隐藏
                    overflow: hidden;
                }
                .price {
                    color: #686969;
                    margin: 5px 0 5px 0;
                    text-decoration: line-through;
                }
            }
        }
        .title {
            width: 200px;
            height: 30px;
            font-size: 18px;
            font-weight: 700;
            line-height: 30px;
            margin: 20px 0 10px 0;
        }
    }

    .GoodBook {
        width: 350px;
        margin: 0 auto;
        border-bottom: 1px solid #e5eaea;
        padding-bottom: 5px;
        .title {
            width: 200px;
            height: 30px;
            font-size: 18px;
            font-weight: 700;
            line-height: 30px;
            margin: 20px 0 15px 0;
        }
        .GoodBook-item {
            width: 100%;
            margin: 15px auto;
            display: flex;
            .img-box {
                width: 20%;
                height: 100px;
            }
            .RigMsg {
                width: calc(80% - 15px);
                margin-left: 10px;
                .name {
                    font-size: 16px;
                    font-weight: 700;
                    margin-bottom: 10px;
                }
                .author-type-atonce {
                    display: flex;
                    .author-type {
                        width: 180px;
                        color: #686969;
                        margin-bottom: 10px;
                    }
                    .atonce {
                        margin-left: 10px;
                    }
                    .greater {
                        font-size: 14px;
                        margin: 2px 0 0 2px;
                    }
                }
                .desc {
                    // 给容器元素类型转换为
                    display: -webkit-box;
                    // 设置弹性盒子垂直排列
                    -webkit-box-orient: vertical;
                    // 控制要显示的行数
                    -webkit-line-clamp: 2;
                    // 溢出隐藏
                    overflow: hidden;
                    text-align-last: left;
                    color: #686969;
                    margin: 0 0 20px 0;
                }
            }
        }
    }

    .Lick {
        width: 350px;
        margin: 0 auto;
        border-bottom: 1px solid #e5eaea;
        padding-bottom: 5px;
        .title {
            width: 200px;
            height: 30px;
            font-size: 18px;
            font-weight: 700;
            line-height: 30px;
            margin: 20px 0 15px 0;
        }
        .Lick-item {
            width: 100%;
            margin: 15px auto;
            display: flex;
            .img-box {
                width: 20%;
                height: 100px;
            }
            .RigMsg {
                width: calc(80% - 15px);
                margin-left: 10px;
                .name {
                    font-size: 16px;
                    font-weight: 700;
                    margin-bottom: 5px;
                }
                .author-type {
                    color: #686969;
                    margin-bottom: 15px;
                }
                .desc {
                    // 给容器元素类型转换为
                    display: -webkit-box;
                    // 设置弹性盒子垂直排列
                    -webkit-box-orient: vertical;
                    // 控制要显示的行数
                    -webkit-line-clamp: 2;
                    // 溢出隐藏
                    overflow: hidden;
                    text-align-last: left;
                    color: #686969;
                }
            }
        }
    }
}
</style>
